import type { 
  ComponentAttributes, 
  ComponentCreationAttributes,
  ComponentPropCreationAttributes,
  ComponentExampleCreationAttributes,
  ComponentImportCreationAttributes,
  TemplateAttributes,
  TemplateCreationAttributes
} from '../database/models/index.js';

/**
 * 组件数据接口
 */
export interface ComponentData {
  name: string;
  category: string;
  title: string;
  description: string;
  documentation_url?: string;
  api_reference?: string;
  version?: string;
  tags: string[];
  props: ComponentPropData[];
  examples: ComponentExampleData[];
  imports: ComponentImportData[];
}

/**
 * 组件属性数据接口
 */
export interface ComponentPropData {
  name: string;
  type: string;
  required: boolean;
  default_value?: string;
  description?: string;
}

/**
 * 组件示例数据接口
 */
export interface ComponentExampleData {
  title: string;
  code: string;
  description?: string;
}

/**
 * 组件导入数据接口
 */
export interface ComponentImportData {
  import_path: string;
  import_name: string;
  is_default: boolean;
}

/**
 * 模板数据接口
 */
export interface TemplateData {
  name: string;
  title: string;
  category: string;
  description: string;
  code: string;
  framework: 'react' | 'vue' | 'angular';
  dependencies: string[];
  preview_url?: string;
  documentation_url?: string;
  tags: string[];
  complexity: 'basic' | 'intermediate' | 'advanced';
}

/**
 * 数据转换工具类
 */
export class DataConverter {
  /**
   * 转换组件数据为数据库格式
   */
  static convertComponent(data: ComponentData): {
    component: ComponentCreationAttributes;
    props: ComponentPropCreationAttributes[];
    examples: ComponentExampleCreationAttributes[];
    imports: ComponentImportCreationAttributes[];
  } {
    const component: ComponentCreationAttributes = {
      name: data.name,
      category: data.category,
      description: data.description,
      version: data.version || '5.x',
      search_keywords: data.tags.join(','),
    };

    const props: ComponentPropCreationAttributes[] = data.props.map(prop => ({
      component_id: 0, // 将在保存时设置
      name: prop.name,
      type: prop.type,
      required: prop.required,
      default_value: prop.default_value,
      description: prop.description,
    }));

    const examples: ComponentExampleCreationAttributes[] = data.examples.map(example => ({
      component_id: 0, // 将在保存时设置
      title: example.title,
      code: example.code,
      description: example.description,
    }));

    const imports: ComponentImportCreationAttributes[] = data.imports.map(importItem => ({
      component_id: 0, // 将在保存时设置
      import_path: importItem.import_path,
      import_name: importItem.import_name,
      import_statement: `import { ${importItem.import_name} } from '${importItem.import_path}';`,
      is_default: importItem.is_default,
    }));

    return { component, props, examples, imports };
  }

  /**
   * 转换模板数据为数据库格式
   */
  static convertTemplate(data: TemplateData): TemplateCreationAttributes {
    return {
      name: data.name,
      category: data.category,
      description: data.description,
      template_code: data.code,
      framework: data.framework,
      dependencies: data.dependencies,
    };
  }

  /**
   * 规范化组件名称
   */
  static normalizeComponentName(name: string): string {
    return name
      .replace(/^ant-design-/, '')
      .replace(/^antd-/, '')
      .replace(/^@ant-design\//, '')
      .trim();
  }

  /**
   * 解析TypeScript类型定义
   */
  static parseTypeDefinition(typeStr: string): string {
    // 清理常见的TypeScript类型噪声
    return typeStr
      .replace(/React\.ReactNode/g, 'ReactNode')
      .replace(/React\.CSSProperties/g, 'CSSProperties')
      .replace(/\s+/g, ' ')
      .trim();
  }

  /**
   * 提取代码示例中的依赖
   */
  static extractDependencies(code: string): string[] {
    const dependencies = new Set<string>();
    
    // 匹配 import 语句
    const importRegex = /import\s+.*?\s+from\s+['"]([^'"]+)['"]/g;
    let match;
    while ((match = importRegex.exec(code)) !== null) {
      const dep = match[1];
      if (dep && !dep.startsWith('.') && !dep.startsWith('/')) {
        dependencies.add(dep);
      }
    }

    return Array.from(dependencies);
  }

  /**
   * 清理和格式化代码
   */
  static formatCode(code: string): string {
    return code
      .replace(/^\s*```\w*\s*/, '') // 移除开始的代码块标记
      .replace(/\s*```\s*$/, '')   // 移除结束的代码块标记
      .replace(/^\s*\/\*[\s\S]*?\*\/\s*/, '') // 移除开头的注释块
      .trim();
  }

  /**
   * 生成默认描述
   */
  static generateDefaultDescription(componentName: string, category?: string): string {
    const descriptions: { [key: string]: string } = {
      // 基础组件
      'Button': '按钮用于开始一个即时操作',
      'Icon': '语义化的矢量图形',
      'Typography': '文本的基本格式',
      
      // 布局组件
      'Divider': '区隔内容的分割线',
      'Grid': '24栅格系统，迅速简便地创建布局',
      'Layout': '协助进行页面级整体布局',
      'Space': '设置组件之间的间距',
      'Flex': '弹性布局组件',
      
      // 导航组件
      'Affix': '将页面元素钉在可视范围',
      'Breadcrumb': '显示当前页面在系统层级结构中的位置',
      'Dropdown': '向下弹出的列表',
      'Menu': '为页面和功能提供导航的菜单列表',
      'Pagination': '采用分页的形式分隔长列表',
      'Steps': '引导用户按照流程完成任务的导航条',
      
      // 数据录入
      'AutoComplete': '自动完成功能的输入框',
      'Checkbox': '多选框',
      'DatePicker': '输入或选择日期的控件',
      'Form': '高性能订阅式表单，一套绝佳的数据域管理流程',
      'Input': '通过鼠标或键盘输入内容，是最基础的表单域的包装',
      'InputNumber': '通过鼠标或键盘输入范围内的数值',
      'Radio': '单选框',
      'Rate': '评分组件',
      'Select': '下拉选择器',
      'Slider': '滑动输入条',
      'Switch': '开关选择器',
      'TimePicker': '输入或选择时间的控件',
      'Transfer': '双栏穿梭选择框',
      'TreeSelect': '树选择控件',
      'Upload': '文件选择上传和拖拽上传控件',
      
      // 数据展示
      'Avatar': '用来代表用户或事物，支持图片、图标或字符展示',
      'Badge': '图标右上角的圆形徽标数字',
      'Calendar': '按照日历形式展示数据的容器',
      'Card': '通用卡片容器',
      'Carousel': '旋转木马，一组轮播的区域',
      'Collapse': '可以折叠/展开的内容区域',
      'Descriptions': '成组展示多个只读字段',
      'Empty': '空状态时的展示占位图',
      'Image': '可预览的图片',
      'List': '通用列表',
      'Popover': '点击/鼠标移入元素，弹出气泡式的卡片浮层',
      'QrCode': '二维码生成器',
      'Statistic': '展示统计数值',
      'Table': '展示行列数据',
      'Tabs': '选项卡切换组件',
      'Tag': '进行标记和分类的小标签',
      'Timeline': '垂直展示的时间流信息',
      'Tooltip': '简单的文字提示气泡框',
      'Tree': '多层次的结构列表',
      
      // 反馈
      'Alert': '警告提示，展现需要关注的信息',
      'Drawer': '屏幕边缘滑出的浮层面板',
      'Message': '全局展示操作反馈信息',
      'Modal': '模态对话框',
      'Notification': '全局展示通知提醒信息',
      'Popconfirm': '点击元素，弹出气泡式的确认框',
      'Progress': '展示操作的当前进度',
      'Result': '用于反馈一系列操作任务的处理结果',
      'Skeleton': '在需要等待加载内容的位置设置一个骨架屏',
      'Spin': '用于页面和区块的加载中状态',
      
      // 其他
      'Anchor': '锚点',
      'BackTop': '返回页面顶部的操作按钮',
      'ConfigProvider': '为组件提供统一的全局化配置',
      'FloatButton': '悬浮按钮',
      'Watermark': '给页面的某个区域加上水印',
      
      // Pro Components
      'ProLayout': '高级布局组件，提供了标准的中后台布局',
      'ProTable': '高级表格组件，在 Table 基础上增加了搜索、筛选、工具栏等功能',
      'ProForm': '高级表单组件，提供了更简单的表单配置方式',
      'ProList': '高级列表组件，提供了卡片列表的标准布局',
      'ProCard': '高级卡片组件，提供了更丰富的卡片样式和功能',
      'ProDescriptions': '高级描述列表组件，提供了更灵活的描述列表配置',
      'ProField': '通用的数据渲染组件，可以根据数据类型自动选择合适的组件进行渲染',
      
      // Ant Design Charts
      'Line': '折线图，用于展示数据在连续区间的变化趋势',
      'Column': '柱状图，用于展示不同分类数据的数值对比',
      'Bar': '条形图，适用于分类较多或文本较长的数据对比',
      'Area': '面积图，用于展示数据的量级大小和变化趋势',
      'Pie': '饼图，用于展示数据的比例关系和整体的组成',
      'Rose': '玉瑰图（南丁格尔玫瑰图），用于展示分类数据的大小对比',
      'Scatter': '散点图，用于分析两个变量之间的相关性',
      'Histogram': '直方图，用于展示数据的分布情况',
      'DualAxes': '双轴图，用于展示两个不同量级数据的相关性',
      'Mix': '混合图表，用于同时展示多种数据类型',
      'Facet': '分面图，用于同时展示多个维度的数据',
      'Sankey': '桑基图，用于展示数据的流向和转化关系',
      'Sunburst': '旭日图，用于展示层级数据的分布和组成',
      'Treemap': '矩形树图，用于展示层级数据的大小和组成',
      'Waterfall': '瀑布图，用于展示数据的累积变化过程',
      'Funnel': '漏斗图，用于展示业务流程中的转化率',
      'Box': '箱型图，用于展示数据的分布和异常值',
      'Violin': '小提琴图，用于展示数据的分布密度',
      'Heatmap': '热力图，用于展示矩阵数据的分布情况',
      'Density': '密度图，用于展示数据在二维空间的密度分布',
      'RadialBar': '径向条形图，用于展示分类数据的大小对比',
      'ProgressChart': '进度环图，用于展示任务或指标的完成进度',
      'Gauge': '仪表盘，用于展示单个指标的实时数值和范围',
      'Bullet': '子弹图，用于展示目标值与实际值的对比',
      'WordCloud': '词云图，用于展示文本数据中关键词的频率',
      'TinyLine': '迷你折线图，用于展示简化的数据趋势',
      'TinyArea': '迷你面积图，用于展示简化的数据量级',
      'TinyColumn': '迷你柱状图，用于展示简化的数据对比',
      'RingProgress': '环形进度条，用于展示完成进度和百分比',
      'Choropleth': '填充地图，用于展示地理区域数据分布',
      'Dot': '点地图，用于展示地理位置数据分布',
      'Path': '路径地图，用于展示地理路径和运动轨迹',
    };
    
    // 优先使用预定义的描述
    if (descriptions[componentName]) {
      return descriptions[componentName];
    }
    
    // 根据分类生成描述
    const categoryDescriptions: { [key: string]: string } = {
      'basic': '基础UI组件',
      'layout': '布局组件',
      'navigation': '导航组件',
      'data-entry': '数据录入组件',
      'data-display': '数据展示组件',
      'feedback': '反馈组件',
      'form': '表单组件',
      'table': '表格组件',
      'chart': '图表组件',
      'other': '其他组件',
      '通用': '通用组件',
      '布局': '布局组件',
      '导航': '导航组件',
      '数据录入': '数据录入组件',
      '数据展示': '数据展示组件',
      '反馈': '反馈组件',
      '其他': '其他组件'
    };
    
    if (category && categoryDescriptions[category.toLowerCase()]) {
      return `${componentName} - ${categoryDescriptions[category.toLowerCase()]}`;
    }
    
    // 根据组件名称特征推测功能
    const name = componentName.toLowerCase();
    if (name.includes('form')) return `${componentName} - 表单相关组件`;
    if (name.includes('table')) return `${componentName} - 表格相关组件`;
    if (name.includes('list')) return `${componentName} - 列表相关组件`;
    if (name.includes('card')) return `${componentName} - 卡片相关组件`;
    if (name.includes('chart')) return `${componentName} - 图表相关组件`;
    if (name.includes('picker')) return `${componentName} - 选择器组件`;
    if (name.includes('input')) return `${componentName} - 输入控件`;
    if (name.includes('button')) return `${componentName} - 按钮控件`;
    if (name.includes('modal') || name.includes('dialog')) return `${componentName} - 对话框组件`;
    if (name.includes('menu')) return `${componentName} - 菜单组件`;
    if (name.includes('nav')) return `${componentName} - 导航组件`;
    if (name.includes('layout')) return `${componentName} - 布局组件`;
    
    // 默认描述
    return `${componentName} - Ant Design 组件`;
  }
  
  /**
   * 生成组件标签
   */
  static generateTags(component: ComponentData): string[] {
    const tags = new Set<string>();
    
    // 添加分类标签
    tags.add(component.category.toLowerCase());
    
    // 根据名称添加功能标签
    const name = component.name.toLowerCase();
    if (name.includes('form')) tags.add('form');
    if (name.includes('table')) tags.add('table');
    if (name.includes('button')) tags.add('button');
    if (name.includes('input')) tags.add('input');
    if (name.includes('select')) tags.add('select');
    if (name.includes('modal')) tags.add('modal');
    if (name.includes('drawer')) tags.add('drawer');
    if (name.includes('menu')) tags.add('navigation');
    if (name.includes('chart')) tags.add('chart');
    if (name.includes('upload')) tags.add('upload');
    
    // 添加UI类型标签
    if (['Button', 'Input', 'Select', 'Checkbox', 'Radio'].includes(component.name)) {
      tags.add('form-control');
    }
    
    return Array.from(tags);
  }

  /**
   * 验证并自动修复组件数据
   */
  static validateAndFixComponent(data: ComponentData): { 
    valid: boolean; 
    errors: string[];
    fixedData: ComponentData;
  } {
    const errors: string[] = [];
    const fixedData = { ...data };

    // 验证必需字段
    if (!fixedData.name || fixedData.name.trim() === '') {
      errors.push('组件名称不能为空');
    } else {
      fixedData.name = fixedData.name.trim();
    }

    // 修复描述
    if (!fixedData.description || fixedData.description.trim() === '') {
      fixedData.description = this.generateDefaultDescription(fixedData.name, fixedData.category);
    }

    // 验证和修复分类
    if (!fixedData.category || fixedData.category.trim() === '') {
      fixedData.category = '其他';
    }

    // 确保有标签
    if (!fixedData.tags || fixedData.tags.length === 0) {
      fixedData.tags = this.generateTags(fixedData);
    }

    // 确保有属性数组（即使为空）
    if (!fixedData.props) {
      fixedData.props = [];
    }

    // 确保有示例数组（即使为空）
    if (!fixedData.examples) {
      fixedData.examples = [];
    }

    // 确保有导入数组（即使为空）
    if (!fixedData.imports) {
      fixedData.imports = [];
    }

    // 设置默认版本
    if (!fixedData.version) {
      fixedData.version = '5.x';
    }

    return {
      valid: errors.length === 0,
      errors,
      fixedData
    };
  }

  /**
   * 验证并自动修复模板数据
   */
  static validateAndFixTemplate(data: TemplateData): {
    valid: boolean;
    errors: string[];
    fixedData: TemplateData;
  } {
    const errors: string[] = [];
    const fixedData = { ...data };

    // 验证必需字段
    if (!fixedData.name || fixedData.name.trim() === '') {
      errors.push('模板名称不能为空');
    } else {
      fixedData.name = fixedData.name.trim();
    }

    // 修复描述
    if (!fixedData.description || fixedData.description.trim() === '') {
      fixedData.description = `${fixedData.name} - 模板`;
    }

    // 验证和修复分类
    if (!fixedData.category || fixedData.category.trim() === '') {
      fixedData.category = '其他';
    }

    // 验证代码
    if (!fixedData.code || fixedData.code.trim() === '') {
      errors.push('模板代码不能为空');
    }

    // 设置默认框架
    if (!fixedData.framework) {
      fixedData.framework = 'react';
    }

    // 确保有依赖数组（即使为空）
    if (!fixedData.dependencies) {
      fixedData.dependencies = ['react', 'antd'];
    }

    // 确保有标签数组（即使为空）
    if (!fixedData.tags) {
      fixedData.tags = ['template'];
    }

    // 设置默认复杂度
    if (!fixedData.complexity) {
      fixedData.complexity = 'basic';
    }

    return {
      valid: errors.length === 0,
      errors,
      fixedData
    };
  }

  /**
   * 验证组件数据完整性（保持向后兼容）
   */
  static validateComponent(data: ComponentData): { valid: boolean; errors: string[] } {
    const result = this.validateAndFixComponent(data);
    return {
      valid: result.valid,
      errors: result.errors
    };
  }

  /**
   * 验证模板数据完整性
   */
  static validateTemplate(data: TemplateData): { valid: boolean; errors: string[] } {
    const errors: string[] = [];
    
    if (!data.name || data.name.trim() === '') errors.push('模板名称不能为空');
    if (!data.title || data.title.trim() === '') errors.push('模板标题不能为空');
    if (!data.category || data.category.trim() === '') errors.push('模板分类不能为空');
    if (!data.code || data.code.trim() === '') errors.push('模板代码不能为空');
    if (!['react', 'vue', 'angular'].includes(data.framework)) {
      errors.push('框架类型必须是 react、vue 或 angular');
    }
    
    return {
      valid: errors.length === 0,
      errors
    };
  }
}